<%--
  Created by IntelliJ IDEA.
  User: K
  Date: 2022/8/17
  Time: 19:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>userList</title>
    <!-- 通过cdn的方式引入，需要连网 -->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="${pageContext.request.contextPath}/static/js/vue.min.js" type="text/javascript"></script>
    <!-- 解决浏览器生产提示信息 -->
    <script> Vue.config.productionTip=false </script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入vue.js -->
    <script src="${pageContext.request.contextPath}/static/js/jquery-2.1.1.min.js" type="text/javascript"></script>

</head>
<body>
<div id="app">
    <center>
        <el-form :inline="true" :model="user" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="user.selectId" placeholder="根据工号查询用户"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="loadData" icon="el-icon-search" circle></el-button>
            </el-form-item>
        </el-form>
    </center>
    <el-button type="primary" @click="addEmployee" icon="el-icon-circle-plus">新增用户</el-button>
    <br>
    <template>
        <el-table
                :data="userList"
                border
                style="width: 100%">
            <el-table-column
                    type="index"
                    label="序号"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="employeId"
                    label="工号"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="employeName"
                    label="用户名"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="employePassword"
                    label="密码"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="employeAge"
                    label="年龄"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="employeGender"
                    label="性别"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="employePhone"
                    label="电话"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="employePower"
                    label="角色"
                    width="150">
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="openUpdateWindow(scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
                    <el-button type="danger" icon="el-icon-delete" circle @click="deleteUserByEmployeeId(scope.row.employeId,scope.row.employeName)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <center>
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="user.page"
                        :page-sizes="[2, 5, 10]"
                        :page-size="user.size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalCount">
                </el-pagination>
            </div>
        </center>
    </template>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            // 用户列表
            userList: [],
            // 查询用户数据
            user: {
                page: 1,
                size: 5,
                selectId: "",
            },
            // 总条数
            totalCount: 0,
        },
        methods: {
            openUpdateWindow(user) {
                localStorage.setItem("updateUser", JSON.stringify(user))
                location.href = '${pageContext.request.contextPath}/updateEmployee'
            },
            deleteUserByEmployeeId(employeId, employeName) {
                if (confirm("你确定要删除" + employeId + "  " + employeName + "吗?")) {
                    var _this = this;
                    $.ajax({
                        url: '${pageContext.request.contextPath}/employee/employeeDelete',
                        dataType: 'json',
                        type: 'get',
                        data: {
                            employeeId: employeId
                        },
                        success: function (rs) {
                            if (rs.code == 200) {
                                _this.$alert(rs.msg + ",正在更新数据...");
                                setTimeout(function () {
                                    location.reload();
                                }, 2000)
                            } else {
                                _this.$alert(rs.msg + ",正在更新数据...");
                                setTimeout(function () {
                                    location.reload();
                                }, 2000)
                            }
                        }, error: function () {
                            _this.$message("删除用户服务器出错!");
                        }
                    })
                }
            },
            loadData(){
                var _this = this;
                $.ajax({
                    url:'${pageContext.request.contextPath}/employee/employeeSelect',
                    dataType:'json',
                    type:'get',
                    data:this.user,
                    success:function (rs) {
                        _this.totalCount = rs.obj.total; // 总条数
                        _this.user.page = rs.obj.pageNum; // 当前页
                        _this.user.size = rs.obj.pageSize; // 页码大小
                        _this.userList = rs.obj.list; // 数据
                    },error:function () {
                        _this.$message("查询用户服务器出错了!");
                    }
                })
            },
            handleSizeChange(newSize) {
                this.user.size = newSize;
                this.loadData();
            },
            handleCurrentChange(newPage) {
                this.user.page = newPage;
                this.loadData();
            },
            addEmployee() {
                location.href = '${pageContext.request.contextPath}/addEmployee'
            }
        },
        mounted() {
            this.loadData();
        }
    })
</script>
</body>
</html>
